<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.staticfile.org/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap-datetimepicker.css">

    <link href="/css/common.css?v=2" rel="stylesheet">

    <title>Data Life</title>
</head>
<body>
<div class="container" id="app-main" v-cloak>
    <div class="row" style="padding-top: 10%">
        <div class="col-3">
            <p class="text-right"><a href="/record/index.html" class="btn btn-light">首页</a></p>
        </div>
        <div class="col-6">
            <h3 class="text-center">{{ record.name }}</h3>
        </div>
        <div class="col-3">
            <div class="dropdown">
                <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown">切换</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#" @click="goWeek">周</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" @click="goMonth">月</a>
                    <div class="dropdown-divider" v-if="record.allow_cumulate"></div>
                    <a class="dropdown-item" href="#" @click="clickCumulate" v-if="record.allow_cumulate">{{ cumulate ? '原始' : '累计'}}</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-right">
            <span @click="yearOffset(-1)" class="custom-icon">
                <span class="fas fa-angle-left"></span>
            </span>
        </div>
        <div class="col-8">
            <input type='text' class="form-control text-center" id='date' v-model="recordDate" readonly/>
        </div>
        <div class="col-2">
            <span @click="yearOffset(1)" class="custom-icon">
                <span class="fas fa-angle-right"></span>
            </span>
        </div>
    </div>
    <div class="row" style="margin-top: 5%">
        <div class="col-12" id="main" style="height: 400px"></div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.26.0/axios.min.js"></script>

<script src="https://cdn.staticfile.org/moment.js/2.29.1/moment.min.js"></script>
<script src="https://kit.fontawesome.com/e78d7410b3.js" crossorigin="anonymous"></script>
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>

<script src="/js/env.js?v=1"></script>
<script src="/js/common.js?v=3"></script>
<script>
    // let serverData = {"record":{"id":3,"name":"支出","allow_cumulate":1},"record_date":"2020-07-12","x_axis_data":["1","2","3","4","5","6","7","8","9","10","11","12"],"series_name_last":"2019","series_data_last":[9369,16409,22198,34379,41374,51388,82647,88190,93901,106263,126352,133035],"series_name_now":"2020","series_data_now":[6835,10350,15678,31563,38730,94719,104607],"grid_x":60};
    // let vm = initVueApp();
    // initApp();

    let serverData, vm, myChart;

    axios.get(env.apiPrefix + '/analysis/line-single', {params: buildParams(["record_id", "record_date"])})
        .then(function (response) {
            if (response.data.code) {
                return;
            }
            serverData = response.data.data;
            vm = initVueApp();
            initApp();
            myChart = echarts.init(document.getElementById('main'));
            refresh(vm);
        });

    function initVueApp() {
        return new Vue({
            el: '#app-main',
            data: {
                record: serverData.record,
                recordDate: serverData.record_date,
                girdX: serverData.gird_x,
                xAxisData: serverData.x_axis_data,
                seriesNameLast: serverData.series_name_last,
                seriesDataLast: serverData.series_data_last,
                seriesNameNow: serverData.series_name_now,
                seriesDataNow: serverData.series_data_now,
                cumulate: 1
            },
            methods: {
                goWeek: function () {
                    window.location.href = generateUrl('/record/week.html', {record_id: vm.record.id, record_date: vm.recordDate});
                },
                goMonth: function () {
                    window.location.href = generateUrl('/record/month.html', {record_id: vm.record.id, record_date: vm.recordDate});
                },
                yearOffset: function (offset) {
                    let requestData = {
                        record_id: this.record.id,
                        record_date: this.recordDate,
                        year_offset: offset,
                        cumulate: this.cumulate
                    };

                    refreshData(requestData);
                },
                clickCumulate: function () {
                    let requestData = {
                        record_id: vm.record.id,
                        record_date: vm.recordDate,
                        cumulate: vm.cumulate ? 0 : 1
                    };

                    refreshData(requestData);

                    vm.cumulate = vm.cumulate ? 0 : 1;
                }
            }
        });
    }

    function refreshData(requestData) {
        axios.get(generateUrl('/analysis/line-single', {}, env.apiPrefix), {params: requestData})
            .then(function (response) {
                if (response.data.code) {
                    return;
                }

                vm.recordDate = response.data.data.record_date;
                vm.girdX = response.data.data.gird_x;
                vm.xAxisData = response.data.data.x_axis_data;
                vm.seriesNameLast = response.data.data.series_name_last;
                vm.seriesDataLast = response.data.data.series_data_last;
                vm.seriesNameNow = response.data.data.series_name_now;
                vm.seriesDataNow = response.data.data.series_data_now;

                refresh(vm);
            });
    }

    function refresh(vm) {
        myChart.clear();

        let colors = ['#5793f3', '#d14a61', '#675bba'];
        let option = {
            color: colors,

            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data: [vm.seriesNameLast, vm.seriesNameNow]
            },
            grid: {
                x: vm.girdX
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return vm.seriesNameNow + "-" + params.value
                                    + (params.seriesData.length ? ': ' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: vm.xAxisData
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return vm.seriesNameLast + "-" + params.value
                                    + (params.seriesData.length ? ': ' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: vm.xAxisData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: vm.seriesNameLast,
                    type:'line',
                    xAxisIndex: 1,
                    smooth: true,
                    data: vm.seriesDataLast
                },
                {
                    name: vm.seriesNameNow,
                    type:'line',
                    smooth: true,
                    data: vm.seriesDataNow
                }
            ]
        };

        myChart.setOption(option);
    }

    function initApp() {
        $(function () {
            $('#date').datetimepicker(
                {
                    format: 'YYYY-MM-DD',
                    defaultDate: vm.recordDate,
                    locale: 'zh-tw',
                    ignoreReadonly: true
                }
            ).on('dp.change', function (e) {
                if (e.date) {
                    if (e.date.format('Y') == e.oldDate.format('Y')) {
                        vm.recordDate = e.date.format('YYYY-MM-DD');
                        return;
                    }

                    let requestData = {
                        record_id: vm.record.id,
                        record_date: e.date.format('YYYY-MM-DD'),
                        cumulate: vm.cumulate
                    };

                    refreshData(requestData);
                } else {
                    alert('Datetime Picker error!')
                }
            });
        });
    }
</script>
</body>
</html>
